<template>
  <view>
    <uv-toast ref="uToast"></uv-toast>
    <uv-no-network></uv-no-network>
    <Nav title="地址"></Nav>
    <Header></Header>
    <view class="container">
      <view class="content">
        <view class="no-address" v-if="addresses.length === 0">
          <uv-empty text="暂无地址" :icon="icon"></uv-empty>
        </view>
        <view class="has-address" v-else>
          <view class="address-item" v-for="(item, index) in addresses" :key="index">
            <view class="item-top">
              <uv-icon name="close" @click="deleteFn(item.id)"></uv-icon>
            </view>
            <view class="item-center">
              <view class="notice">
                <view class="name">{{ item.consignee }}，</view>
                <view class="phone">{{ item.phone }}</view>
              </view>
              <view class="address">{{ item.address }}</view>
            </view>
            <view class="item-bottom">
              <view class="bottom-left">
                <uv-radio-group v-model="item.is_default" @change="setDefault(item)">
                  <uv-radio name="默认" label="默认"></uv-radio>
                </uv-radio-group>
              </view>
              <view class="bottom-right">
                <uv-button text="复制"></uv-button>
                <uv-button text="修改" custom-style="margin-left: 8px"></uv-button>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="btn" @click="addAddressFn">
        <uv-button text="新增地址" type="primary"></uv-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import Nav from "@/components/nav.vue";
import Header from "@/components/header.vue";
import { ref, onMounted } from "vue";
import { getAddress, setDefaultAddress, deleteAddress } from "@/request/api";

const addresses = ref([]);

onMounted(() => {
  getAddress().then(res => {
    if (res.code === 0) {
      addresses.value = res.result;
      console.log(res.result, '000');
    }
  });
});

const setDefault = (selectedAddress) => {
  // Remove default from all other addresses
  addresses.value.forEach(address => {
    if (address.id !== selectedAddress.id) {
      address.is_default = false;
    }
  });

  // Set the selected address as default
  setDefaultAddress(selectedAddress.id).then(res => {
    if (res.code === 0) {
      uni.showToast({
        icon: 'none',
        title: '设置默认地址成功',
      });
    }
  });
};

const addAddressFn = () => {
  uni.navigateTo({
    url: '/pages/address/addAddr/addAddr'
  });
};
const deleteFn = (id) => {
  uni.showModal({
    title: '提示',
    content: '确定删除该地址吗？',
    success: (res) => {
      if (res.confirm) {
        // 删除操作
        console.log('删除操作', id);
        deleteAddress(id).then(res => {
          if (res.code === 0) {
            uni.showToast({
              title: '删除成功',
              icon: 'success',
            });
            // 重新请求购物车数据
            getAddress().then(res => {
              if (res.code === 0) {
                addresses.value = res.result;
              }
            });
          } else {
            uni.showToast({
              icon: 'none',
              title: '删除失败，请重试',
            })
          }
        });
      } else if (res.cancel) {
        // 取消操作
        console.log('取消操作');
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.container{
  height: calc(100vh - 88px);
  width: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
  //border: 1px solid red;
  //padding: 0 20px;
  background-color: #f7f7f8;
  &::-webkit-scrollbar {
    display: none;
  }
  .content{
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 50px);
    .no-address{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .has-address{
      width: 100%;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      height: 100%;
      .address-item{
        margin-top: 10px;
        margin-bottom: 10px;
        box-sizing: border-box;
        padding: 10px 0;
        background-color: #fff;
        border-radius: 8px;
        .item-top{
          box-sizing: border-box;
          padding: 0 15px;
          display: flex;
          width: 100%;
          justify-content: flex-end;
        }
        .item-center{
          padding: 0 15px;
          box-sizing: border-box;
          width: 100%;
          .notice{
            display: flex;
            margin-bottom: 8px;
          }
        }
        .item-bottom{
          margin-top: 8px;
          padding: 8px 15px 0;
          width: 100%;
          box-sizing: border-box;
          border-top: 1px solid #ccc;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .bottom-right{
            display: flex;
          }
        }
      }
    }
  }
  .btn{
    position: fixed;
    bottom: 10px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
}
</style>
